<template>
    <div>
        <h2>实时拥堵指数</h2>
        <p>高速主干路 - 快速路</p>
        <div class="towter">
            <span>拥堵指数</span>
            <span>2.45</span>
            <span>1.68</span>
        </div>
        <div class="towter1">
            <span>平均速度</span>
            <span>47km/h</span>
            <span>62km/h</span>
        </div>
        <div class="towter2">
            <span>同比上周增长</span>
            <span>40%</span>
            <span>54%</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueModule3',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
p{
    margin-top: 30px;
    margin-left: 200px;
}
.towter{
    margin-top: 10px;
    padding-left: 30px;
    height: 60px;
    line-height: 60px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}
.towter>span:nth-child(2){
    padding-left: 130px; 
}
.towter>span:nth-child(3){
    padding-left: 40px;
}

.towter1{
    margin-top: 20px;
    height: 40px;
    // line-height: 40px;
    padding-left: 30px;
}
.towter1>span:nth-child(2){
    padding-left: 90px; 
}
.towter1>span:nth-child(3){
    padding-left: 40px;
}
.towter2{
    height: 50px;
    padding-left: 30px;
}
.towter2>span:nth-child(2){
    padding-left: 100px; 
}
.towter2>span:nth-child(3){
    padding-left: 40px;
}

</style>